<template>
  <bazi-section title="个人八字信息">
    <view class="ganzhi-containter">
      <view class="ganzhi_item" style="background-color: #F0F0F0">
        <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">十神</view>
        <text class="ganzhi_content" v-for="(item, index) in baziShishen" :key="index">{{ item }}</text>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">天干</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in tiangan" :key="index">
          <view :style="fiveElementInfo(item).color">{{
              item
            }}</view>
          <image class="element-icon" :src="fiveElementInfo(item).img"></image>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">地支</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in dizhi" :key="index">
          <view :style="fiveElementInfo(item).color">{{
              item
            }}</view>
          <image class="element-icon" :src="fiveElementInfo(item).img"></image>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">藏干</view>
        <text class="ganzhi_content ganzhi_content_canggan" v-for="(item, index) in canggan" :key="index">
          <view v-for="(e, i) in (item.split(','))" :style="fiveElementInfo(e).color" :key="i">{{e}}</view>
        </text>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">
          <view>藏干</view>
          <view>十神</view>
        </view>
        <text class="ganzhi_content ganzhi_content_cangganShishen" v-for="(item, index) in cangganShishen"
          :key="index">
          <view v-for="(e, i) in item" :key="i">{{ e }}</view>
        </text>
      </view>
    </view>
  </bazi-section>
</template>
<script>
  import baziSection from './section.vue'
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    components: {
      baziSection
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
        baziShishen: [],
        tiangan: [],
        dizhi: [],
        canggan: [],
        cangganShishen: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.baziShishen = [this.baziResult.yearGanShiShen, this.baziResult.monthGanShiShen, this.baziResult
          .dayGanShiShen, this.baziResult.timeGanShiShen
        ];
        this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
          .timeGan
        ];
        this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult
          .timeZhi
        ];
        this.canggan = [this.baziResult.yearCangGan, this.baziResult.monthCangGan, this.baziResult.dayCangGan, this
          .baziResult.timeCangGan
        ];
        this.cangganShishen = [this.baziResult.yearZhiShiShen, this.baziResult.monthZhiShiShen, this.baziResult
          .dayZhiShiShen, this.baziResult.timeZhiShiShen
        ];
      })
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      },
      // 选择流日导致农历月份跨月变更
      changeLunarmonth(data) {
        this.$set(this.niansui, 1, data.monthInChinese + '月');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .calendar_containter {
    width: 100%;
    box-sizing: border-box;
  }

  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #C5A680;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      padding-right: 22rpx;
    }

  }

  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28rpx;
  }

  .ganzhi_item {
    display: flex;
    flex-direction: row;
    padding: 4rpx 0;
  }

  .ganzhi_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #808080;
    font-size: 26rpx;
    line-height: 48rpx;
    flex: 1 0;
  }

  .ganzhi_content {
    display: flex;
    justify-content: center;
    color: #4b240d;
    flex: 1 0;
    font-size: 26rpx;
    line-height: 48rpx;
  }

  .ganzhi-important {
    font-size: 32rpx;
    align-items: center;
  }

  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .ganzhi_content_canggan{
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    line-height: 44rpx;
  }
  .ganzhi_content_cangganShishen {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .shiniandayun-containter {
    display: flex;
    flex-direction: column;
    color: #4b240d;
  }

  .shiniandayun-title {
    font-size: 36rpx;
    color: #808080;
    display: flex;
    padding: 13rpx;
    font-weight: bolder;
    justify-content: center;
  }

  .shiniandayun-detail {
    display: flex;
    flex-direction: row;
    font-size: 22rpx;
    line-height: 58rpx;
  }

  .shiniandayun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0;
    white-space: nowrap;
  }

  .shiniandayun-item:last-child .shiniandayun_content {
    padding-right: 44rpx;
  }

  .shiniandayun_content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bolder;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .shiniandayun-item-title {
    color: #6e512e;
    font-size: 28rpx;
    line-height: 56rpx;
    font-weight: bold;
    white-space: nowrap;
    padding: 0px 8rpx 0 44rpx;
    color: rgb(128, 128, 128);
  }

  .dayun-select {
    box-sizing: border-box;
    background-color: #c5a680;
    border-radius: 6rpx;
    padding-top: 0;
    padding-bottom: 0;
    padding: 0 4rpx;
  }

  .dayun-noselect {
    box-sizing: border-box;
    border-radius: 6rpx;
    padding-top: 0;
    padding-bottom: 0;
  }

  .shinian-dayun-title {
    line-height: 96rpx;
  }

  .shinian-dayun {
    flex-direction: column;
    line-height: 48rpx;
  }

  .shinian-shishen {
    flex-direction: column;
    line-height: 48rpx;
  }

  .shiniandayun_explain {
    padding: 8px;
  }

  .liunian-containter {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .liunian-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0;
    font-size: 22rpx;
    font-weight: bold;
    line-height: 40rpx;
    color: #4b240d;
    border-left: 2rpx solid #c9c9c9;
  }

  .liunian-item:last-child {
    margin-right: 44rpx;
    border-right: 2rpx solid #c9c9c9;
  }

  .fucaixigui-containter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 50rpx;
  }

  .fucaixigui_item {
    display: flex;
    flex-direction: column;
    flex: 1 0;
    font-size: 28rpx;
    line-height: 56rpx;
  }

  .fucaixigui_title {
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bolder;
    color: #808080;
    background-color: #f6f6f6;
  }

  .fucaixigui_content {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4b240d;
    font-weight: bolder;
  }

  .tuiyanshen-containter {
    display: flex;
    margin: 32rpx 55rpx 0;
    padding-bottom: 50rpx;
  }

  .tuiyanshen_left_containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #4b240d;
    font-size: 22rpx;
    line-height: 30rpx;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_left_item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 12rpx 4rpx;
    flex: 1 0;
  }

  .tuiyanshen_item_title {
    white-space: nowrap;
    font-weight: bolder;
  }

  .tuiyansehn_item_content {
    margin-left: 8rpx;
  }

  .tuiyanshen_right_containter {
    color: #6e512e;
    display: flex;
    flex-direction: column;
    margin-left: 37rpx;
    flex: 1 0;
  }

  .tuiyanshen_right_top_item {
    margin-bottom: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_right_bottom_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 1 0;
    border-radius: 30rpx;
    box-shadow: 0 0 8rpx #666;
  }

  .tuiyanshen_right_item_title {
    color: #808080;
    font-weight: bolder;
    font-size: 36rpx;
  }

  .tuiyanshen_right_item_content {
    font-size: 28rpx;
    line-height: 32rpx;
    padding-left: 16rpx;
    padding-right: 16rpx;
    justify-content: center;
    align-items: center;
  }

  .ad-box {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 30rpx;
  }

  .ad-content {
    width: 640rpx;
    height: 181rpx;
    box-shadow: 0 0 10rpx #666;
    background-color: #c6a680;
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .ad-box-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
  }

  .tips-title {
    font-size: 36rpx;
  }

  .tips-des {
    font-size: 28rpx;
  }

  .ad-btn {
    width: 240rpx;
    height: 50rpx;
    background-color: #ffffff;
    border-radius: 25rpx;
    color: #4b240d;
    font-weight: bold;
    text-align: center;
    margin-top: 15rpx;
    font-size: 28rpx;
    line-height: 46rpx;
  }
</style>